{extend name="admin@public/base" /}
{block name="styles"}
<style>
    .table-striped-new>tbody>tr:nth-of-type(4n+1) {
        background-color: #f9f9f9 !important;
    }
</style>
{/block}
{block name="main-content"}
<div class="page-content" style="padding-left:20px;padding-right:20px;">
    <div class="row maintop">
        <div class="col-xs-2 col-sm-2  margintop5">
            <a href="{:url('admin/Announce/add')}">
                <button class="btn btn-sm btn-danger">
                    <i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>
                    新增资讯
                </button>
            </a>
        </div>

        <form class="form-search form-horizontal" action="{:url('admin/Announce/index')}" method="get">
            <div class="form-group">
                <label style="">资讯标题 : </label>
                <input type="text" name="title" id="title" value="{$title}" placeholder="输入资讯标题关键字" class="search-query admin_sea">
                &nbsp;&nbsp;
                <button type="submit" class="btn btn-xs btm-input btn-purple" style="margin:-5px 0 0 100px">
                    <span class="ace-icon fa fa-search icon-on-right bigger-110 ajax-search-form"></span>
                    搜索
                </button>
            </div>
        </form>
    </div>
    <div class="tabbable">
        <div class="tab-content no-border tab-pane in active" id="pending">
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-striped-new table-bordered table-hover" id="dynamic-table">
                            <thead>
                                <tr>
                                    <th class="center" width="5%">编号</th>
                                    <th class="center" width="20%">资讯名称</th>
                                    <th class="center" width="10%">副标题</th>
                                    <th class="center" width="">资讯图片</th>
                                    <th class="center" width="">资讯内容</th>
                                    <th class="center" width="10%">添加日期</th>
                                    <th class="center" width="10%">修改日期</th>
                                    <th class="center" width="10%" style="border-right:#CCC solid 1px;">操作</th>
                                </tr>
                            </thead>
                            <tbody id="ajax-data">
                                {include file="announce/ajax_index"/}
                            </tbody>
                        </table>
                    </div>
                </div>
        </div>
    </div>
</div><!-- /.page-content -->
{/block}
{block name="scripts"}
<script src="__PUBLIC__/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="__PUBLIC__/jquery-ui/jquery-ui.min.js"></script>
<script src="__PUBLIC__/assets/js/jquery.colorbox.min.js"></script>
<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
<script type="text/javascript">

    //查看图片插件
    jQuery(function($) {
        var $overflow = '';
        var colorbox_params = {
            rel: 'colorbox',
            reposition:true,
            scalePhotos:false,
            scrolling:true,
            previous:'<i class="ace-icon fa fa-arrow-left"></i>',
            next:'<i class="ace-icon fa fa-arrow-right"></i>',
            close:'&times;',
            current:'{current} of {total}',
            maxWidth:'80%',
            maxHeight:'80%',
            onOpen:function(){

            },
            onClosed:function(){
                document.body.style.overflow = $overflow;
            },
            onComplete:function(){
                $.colorbox.resize();
            }
        };

        $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
        $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


        $(document).one('ajaxloadstart.page', function(e) {
            $('#colorbox, #cboxOverlay').remove();
        });
    })

    //判断是否为Trident内核浏览器(IE等)函数
    function browserIsIe() {
        if (!!window.ActiveXObject || "ActiveXObject" in window){
            return true;
        }
        else{
            return false;
        }
    }
    //创建iframe并赋值的函数,传入参数为图片的src属性值.
    function createIframe(imgSrc) {
        //如果隐藏的iframe不存在则创建
        if ($("#IframeReportImg").length === 0){
            $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
        }
        //iframe的src属性如不指向图片地址,则手动修改,加载图片
        if ($('#IframeReportImg').attr("src") != imgSrc) {
            $('#IframeReportImg').attr("src",imgSrc);
        } else {
            //如指向图片地址,直接调用下载方法
            downloadImg();
        }
    }
    //下载图片的函数
    function downloadImg() {
        //iframe的src属性不为空,调用execCommand(),保存图片
        if ($('#IframeReportImg').src != "about:blank") {
            window.frames["IframeReportImg"].document.execCommand("SaveAs");
        }
    }
    //接下来进行事件绑定
    var aBtn = $(".down_btn_a");
    if (browserIsIe()) {
        //如果浏览器是ie等,绑定事件
        aBtn.on("click", function() {
            id = $(this).attr('va');
            var imgSrc = $(this).parents('#'+id).find('img').attr("src");
            //调用创建iframe的函数
            createIframe(imgSrc);
        });
    } else {
        aBtn.each(function(i,v){
            //支持download,添加属性.
            id = $(this).attr('va');
            var imgSrc = $(v).parents('#'+id).find('img').attr("src");
            $(v).attr("download",imgSrc);
            $(v).attr("href",imgSrc);
        })
    }
</script>
{/block}